<template>
    <div>
        <Modal v-model="isShowModal" :title="title" @on-cancel="hide()" :mask-closable="false">

            <template v-if="logistics.data.length">
                <Timeline>
                    <TimelineItem v-for="(item,index) in logistics.data" :key="index">
                        <p class="time">{{item.time}}</p>
                        <p class="content">{{item.context}}</p>
                    </TimelineItem>
                </Timeline>
            </template>
            <template v-else>
                <div style="width: 100%;background-color: #f8f8f9; text-align: center;padding: 10px">暂无物流信息</div>
            </template>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide('formValidate')">取消</Button>
                <Button type="primary" @click="hide()" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "order-logistics-tracking",
        data() {
            return {
                isShowModal: false,
                loadingBtn: false,
                logistics: {
                    data:[]
                },
                title: '物流跟踪'
            }
        },
        methods: {
            // 显示模态框
            show(row) {
                this.isShowModal = true;
                this.getOrderVipById(row);
            },
            // 查询订单详情
            getOrderVipById(row) {
                this.$Spin.show();
                this.axios.post('/orderVip/getOrderVipById', {
                    vipOrderId: row.orderVipId
                }).then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        this.logistics = JSON.parse(res.data.logistics);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看订单详情接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
                this.logistics.data = [];
            }
        }
    }
</script>

<style scoped lang="less">

</style>